<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th {
            padding: 5px 10px;
            text-align: center;
        }

        td {
            padding: 5px 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <div id="app">
        <button @click="all()">全部</button>
        <button @click="pass()">及格</button>
        <button @click="fail()">不及格</button><br>
        <table border="1px">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名字</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item) in arr2" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.grade}}</td>
                    <td>
                        <button @click="del(item.id)">删除</button>
                        <button @click="update(item.id)">修改</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button @click="litre()">升序</button>
        <button @click="drop()">降序</button><br>
        <input type="text" v-model="search"><button @click="sea()">搜索</button>
        <p>总分：{{zong}}</p>
        <p>平均分：{{reduce}}</p>
        <div v-show="show_div_update">
            <input type="text" v-model="update_grade">
            <button @click="yes_update()">确认修改</button>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                search: "",
                show_div_update: false,
                update_grade:"",
                arr: [{
                    id: 1,
                    name: "张三",
                    grade: 90,
                }, {
                    id: 2,
                    name: "李四",
                    grade: 30,
                }, {
                    id: 3,
                    name: "王五",
                    grade: 60,
                }, {
                    id: 4,
                    name: "赵六",
                    grade: 50,
                }, {
                    id: 5,
                    name: "沈七",
                    grade: 10,
                }],
                arr2: [{
                    id: 1,
                    name: "张三",
                    grade: 90,
                }, {
                    id: 2,
                    name: "李四",
                    grade: 30,
                }, {
                    id: 3,
                    name: "王五",
                    grade: 60,
                }, {
                    id: 4,
                    name: "赵六",
                    grade: 50,
                }, {
                    id: 5,
                    name: "沈七",
                    grade: 10,
                }]
            },
            methods: {
                pass() {
                    var a = this.arr.filter(item => item.grade >= 60)
                    this.arr2 = a
                },
                fail() {
                    var a = this.arr.filter(item => item.grade < 60)
                    this.arr2 = a
                },
                all() {
                    this.arr2 = this.arr
                },
                litre() {
                    var a = this.arr.sort((a, b) => b.grade - a.grade)
                    console.log(a);

                },
                drop() {
                    var a = this.arr.sort((a, b) => a.grade - b.grade) 
                    this.arr2 = a
                },
                del(id) {
                    var a = this.arr2.findIndex(item => item.id == id)
                    this.arr2.splice(a, 1)
                },
                update() {
                    this.show_div_update = !this.show_div_update
                },
                sea() {
                    var a = this.arr.find(item => item.name == this.search)
                    this.arr2 = [a]
                }
            },
            computed: {
                zong: function () {
                    let zong = 0
                    this.arr2.forEach(item => {
                        zong += item.grade
                    })
                    return zong
                },
                reduce: function () {
                    let reduce = 0
                    let zong = 0
                    let num = this.arr2.length
                    this.arr2.forEach(item => {
                        zong += item.grade
                    })
                    reduce = zong / num
                    return reduce
                },

            }
        })
    </script>
</body>

</html>